<!-- <template>
	<view class="container">
		<view class="tick">
			<view class="left">
				<view class="price"
					:class="{upText: (tick != undefined && tick.change >= 0),downText: (tick != undefined && tick.change < 0)}">
					{{tick != undefined ? tick.close : 0.00}}</view>
				<view class="detail">
					<text class="cny"> ≈ {{tick != undefined ? tick.cny : 0.00}} CNY</text>
					<text class="rise"
						:class="{upText: (tick != undefined && tick.change >= 0),downText: (tick != undefined && tick.change < 0)}">{{tick != undefined ? tick.change : 0.00}}%</text>
				</view>
			</view>
			<view class="right">
				<view class="b">
					<view class="col title">
						<view class="t">{{i18n.market.high}}</view>
						<view class="t">{{i18n.market.low}}</view>
						<view class="t">24H</view>
					</view>
					<view class="col">
						<view>{{tick.high}}</view>
						<view>{{tick.low}}</view>
						<view>{{tick.vol | formatD}}</view>
					</view>
				</view>
			</view>
		</view>
		<kline-chart ref="klineChart" :width="'100%'" :height="700" :theme="theme" :symbol="symbol" :lang="lang" />
	</view>
</template>

<script>
	import KlineChart from '@/components/klinechart/kline-chart.vue'
	import {commonMixin} from '@/common/mixin/mixin.js'
	export default {
		components: {
			KlineChart
		},
		mixins: [commonMixin],
		data() {
			return {
				theme: 'light',
				symbol: 'ETHUSDT',
				lang: 'zh-CN',
				tick: {},
				currentMarket: {},
			}
		},
		onShow() {
			setTimeout(() => {
				this.syncSubMarketDetail();
			}, 1000)
		},
		methods: {
			syncSubMarketDetail(){
				let that = this
				let ch = `market.${this.symbol.toLowerCase()}.detail`
				let params = {
				  "id": new Date().getTime(),
				  "sub": ch,
				}
				this.$store.dispatch('TIO_SEND', JSON.stringify(params))
				uni.$on(`sub.${ch}`, (res) => {
					let tick = res.data.tick
					tick.change = parseFloat((tick.close - tick.open) / tick.open * 100).toFixed(2);
					tick.cny = parseFloat(tick.close * 6.4).toFixed(2)
					this.tick = tick
				})
			},

			switchTheme() {
				this.theme = this.theme === 'light' ? 'dark' : 'light'
				this.chartData = {
					...this.chartData,
					theme: this.theme
				}
			},

			addMACD() {
				// 10.0.0版本的技术指标添加方式
				this.chartData = {
					...this.chartData,
					indicators: [{
							name: 'MA',
							calcParams: [5, 10, 20],
							styles: {
								line: [{
										color: '#FF9600',
										size: 1
									},
									{
										color: '#9D65C9',
										size: 1
									},
									{
										color: '#2196F3',
										size: 1
									}
								]
							}
						},
						{
							name: 'MACD',
							paneId: 'secondary',
							styles: {
								bar: {
									upColor: '#EF5350',
									downColor: '#26A69A'
								},
								line: {
									dif: {
										color: '#FF9600',
										size: 1
									},
									dea: {
										color: '#9D65C9',
										size: 1
									},
									macd: {
										size: 1
									}
								}
							}
						}
					]
				}
			},

			// 模拟实时数据更新
			startRealTimeUpdate() {
				this.timer = setInterval(() => {
					const lastData = this.$refs.klineChart.getChartInstance()?.getDataList() || []
					const lastItem = lastData[lastData.length - 1] || {
						timestamp: new Date().getTime(),
						open: 100,
						high: 100,
						low: 100,
						close: 100,
						volume: 0
					}

					const newClose = lastItem.close + (Math.random() - 0.5) * 2
					const newHigh = Math.max(lastItem.high, newClose)
					const newLow = Math.min(lastItem.low, newClose)

					const newItem = {
						timestamp: lastItem.timestamp + 60 * 1000,
						open: lastItem.close,
						high: newHigh,
						low: newLow,
						close: newClose,
						volume: parseFloat((Math.random() * 1000).toFixed(2))
					}

					this.chartData = {
						...this.chartData,
						data: [...this.chartData.data, newItem],
						incremental: true
					}
				}, 3000)
			},

			stopRealTimeUpdate() {
				if (this.timer) {
					clearInterval(this.timer)
				}
			}
		},
		mounted() {
			//this.startRealTimeUpdate()
		},
		beforeDestroy() {
			//this.stopRealTimeUpdate()
		}
	}
</script>

<style lang="scss">
	.container {
		box-sizing: border-box;
	}

	.tick {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30rpx 30rpx;

		.left {
			flex: 1;
			.price {
				font-size: $font-xxl;
				font-weight: bold;
			}
			.detail {
				display: block;
				color: rgb(88, 116, 152);
				font-size: $font-sm;
				padding-top: 10upx;
				.rise {
					margin-left: 20upx;
				}
			}
		}

		.right {
			flex: 1;
			display: flex;
			.b {
				justify-content: right;
				width: 100%;
				display: flex;
				.col {
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: right;
				}
				.title {
					width: 60rpx;
					text-align: left;
					.t {
						color: rgb(88, 116, 152);
					}
				}
			}
		}
	}

	button {
		margin: 10px;
		padding: 10px 15px;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style> -->